import React, { Component } from 'react'

import { Card,  Modal, message, Button, Form,  } from 'antd'
import Axios from './../../axios'
import Utils from '../../utils/utils'
import './../../style/common.less'
import BaseForm from '../../components/BaseForm'
import ETable from './../../components/ETable'
const FormItem = Form.Item;
// const Option = Select.Option;

export default class City extends Component {
    state = {
        orderInfo:{},
        selectedItem:null,
        selectedRowKeys:null,
        orderConfirmVisible: false
    }
    params = {
        page: 1
    }
    formList = [
        {
            type: 'SELECT',
            field: 'city',
            label: '城市',
            placeholder: '全部',
            initialVale: '1',
            width: 80,
            list: [{ id: '0', name: '全部' },
            { id: '1', name: '北京' },
            { id: '2', name: '天津' },
            { id: '3', name: '上海' }
            ]
        },
        {
            type: '时间查询',
            field:"timesearch"
        },
        {
            type: 'SELECT',
            field: 'order_status',
            label: '订单状态',
            placeholder: '全部',
            initialVale: '1',
            width: 80,
            list: [{ id: '0', name: '全部' },
            { id: '1', name: '进行中' },
            { id: '2', name: '结束行程' }
            ]
        }
    ]
    componentDidMount() {
        this.requestList()
    }
    handleFilter = (params) => {
        this.params = params;
        this.requestList();
    }
    // 默认请求接口数据
    requestList = () => {
        Axios.requestList(this, "/order/list", this.params,true) 
    }

    handleConfirm = () => {
        let item = this.state.selectedItem;
        if(!item){
            Modal.info({
                title:'信息',
                content:'请选择一条订单结束'
            })
            return;
        }
        Axios.ajax({
            
                url: 'order/ebike_info',
            data: {
                params: {
                    orderId:item.id
                }
            }
        }).then((res) => {
            if (res.code === "0"||res.code===0) {
              
                this.setState({
                    orderConfirmVisible: true,
                    orderInfo: res.result
                })
            }
        })

    }
    handleFinishOrder=()=>{
        let item = this.state.selectedItem;
        Axios.ajax({

            url: 'order/finish_order',
            data: {
                params: {
                    orderId: item.id
                }
            }
        }).then((res) => {
            if (res.code === "0" || res.code === 0) {
                message.success('订单结束成功')
                this.setState({
                    orderConfirmVisible: false,
                    orderInfo: res.result
                })
                this.requestList();
            }
        })
    }
    openOrderDetail=()=>{
        let item = this.state.selectedItem;
        if (!item) {
            Modal.info({
                title: '信息',
                content: '请选择一条订单查看详情'
            })
            return;
        }
        window.open(`/#/common/order/detail/${item.id}`,"_blank")
    }
    render() {
        const columns = [
            {
                title: '订单编号',
                dataIndex: 'order_sn'
            }, {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            }, {
                title: '用户名',
                dataIndex: 'user_name'
            }, {
                title: '手机号',
                dataIndex: 'mobile'
            }, {
                title: '里程',
                dataIndex: 'distance',
                render(distance) {
                    return distance / 1000 + 'Km'
                    // 公里数
                }

            }, {
                title: '行驶时长',
                dataIndex: 'total_time'
            }, {
                title: '状态',
                dataIndex: 'status'
            }, {
                title: '开始时间',
                dataIndex: 'start_time'
            }, {
                title: "结束时间",
                dataIndex: 'end_time'
            }, {
                title: '订单金额',
                dataIndex: 'total_fee'
            }, {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ]
        const formItemLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        }
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter}></BaseForm>
                </Card>
                <Card style={{ marginTop: 10 }}>
                    <Button type="primary"  onClick={this.openOrderDetail}>订单详情</Button>
                    <Button type="primary" style={{marginLeft:10}} onClick={this.handleConfirm}>结束订单</Button>
                </Card>
                <div className="content-wrap">
                    <ETable 
                        rowKey={columns.id}
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        selectedRowKeys={this.state.selectedRowKeys}
                        selectedItem={this.state.selectedItem}
                        selectedIds={this.state.selectedIds}
                        //单选就不写
                        rowSelection="checkbox"
                    />
                </div>
                <Modal
                    title="结束订单"
                    visible={this.state.orderConfirmVisible}//控制Modal是显示还是隐藏
                    onCancel={() => {
                        this.setState({
                            orderConfirmVisible: false
                        })
                    }}
                    onOk={this.handleFinishOrder}
                    width={600}
                >
                    <Form layout="horizontal">
                        <FormItem label="车辆编号" {...formItemLayout}>
                            {this.state.orderInfo.bike_sn}
                        </FormItem>
                        <FormItem label="剩余电量" {...formItemLayout}>
                            {this.state.orderInfo.battery + '%'}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLayout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                        <FormItem label="当前位置" {...formItemLayout}>
                            {this.state.orderInfo.location}
                        </FormItem>
                    </Form>
                    {/* <OpenCityForm
                        wrappedComponentRef={(inst) => {
                            this.cityForm = inst;
                        }}
                    ></OpenCityForm> */}
                </Modal>
            </div>
        )
    }
}
